﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>messenger</title>
    <script src="/Scripts/winjscontrib/mcnext.ui.messenger.js"></script>
    <link href="messenger.css" rel="stylesheet" />
    <script src="messenger.js"></script>
</head>
<body>
    <div class="messenger fragment">
        <header class="page-header" aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Messenger</span>
            </h1>
            <div class="codelink" data-codepage="./pages/core/messenger/messenger"><span class="symbol">&#xE160;</span><span class="text">show me the code !</span></div>
        </header>
        <section class="desc-screen" aria-label="Main content" role="main">
            <div class="bloc-description">
                <p>
                    It's sometimes necessary to open an iframe to isolate code, or use web code in a Windows app, or multi-thread treatments with a web worker.
                </p>
                <p>
                    In such cases the "main" code will communicate with the external code using "postMessage", and listening for "message" event.
                </p>
                <p>
                    The goal of this utility is to wrap the messaging capabilities and to provide a promise based capabilities. For example, it allows for running a worker and getting a promise for task completion.
                </p>
            </div>
            <div></div>
            <div class="bloc-content">
                <h2>iframe communication</h2>
                <p>
                    the messenger can be used to wrap communication with an iframe. You could wrap success or error calls.
                    <iframe id="messagingframe" src="ms-appx-web:///pages/core/messenger/iframe.html" width="0" height="0"></iframe>
                </p>
                <p>
                    <button data-page-action="iframeTreatment">start some treatment in an isolated iframe</button>
                    <button data-page-action="iframeTreatmentWithError">start some treatment in an isolated iframe</button>
                </p>
                <p class="iframeTreatmentMessage">&nbsp;</p>
                <h2>web workers</h2>
                <p>
                    Messenger can also be used to interact with web workers
                </p>
                <p>
                    <button data-page-action="webworkerTreatment">classic worker</button>
                    <button data-page-action="webworkerTreatmentWithError">classic worker with error</button>
                </p>
                <p class="webworkerTreatmentMessage">&nbsp;</p>
                <p>
                    You could also use SmartWorker to execute a function defined in your code within a worker (as long as you import the required dependencies).
                    In such case, the function provided is projected and passed to the worker in string format. It means that you will not be able to debug this function.
                </p>
                <p>
                    <button data-page-action="smartworkerTreatment">smart worker</button>
                    <button data-page-action="smartworkerTreatmentWithError">smart worker with error</button>
                </p>
                <p class="smartworkerTreatmentMessage">&nbsp;</p>
            </div>
        </section>
    </div>
</body>
</html>
